<template>
  <el-container direction="vertical" class="myMsg-box">
    <el-card class="box-card" style="width:70%">
      <el-form ref="form" v-loading="loading" :model="form" :inline="true" label-width="60px" label-position="left">
        <el-descriptions class="msg-box" title="用户信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              用户名
            </template>
            <el-input v-model="form.username" readonly />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              姓名
            </template>
            <el-input v-model="form.name" :disabled="modifyState" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              性别
            </template>
            <el-radio-group v-model="form.sex" :disabled="modifyState">
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              电话
            </template>
            <el-input v-model="form.phone" :disabled="modifyState" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              地址
            </template>
            <el-input v-model="form.address" :disabled="modifyState" />
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="车辆信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              品牌
            </template>
            <el-input v-model="form.brand" :disabled="modifyState" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              型号
            </template>
            <el-input v-model="form.model" :disabled="modifyState" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              颜色
            </template>
            <el-input v-model="form.color" :disabled="modifyState" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              车牌
            </template>
            <el-input v-model="form.carId" :disabled="modifyState" />
          </el-descriptions-item>
        </el-descriptions>
        <el-form-item style="display: block;text-align: right;margin: 20px 0 6px 0;">
          <el-button type="primary" :disabled="!modifyState" @click="modifyState=false">修改</el-button>
          <el-button type="primary" :disabled="modifyState" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
      <div class="join-vip-box">
        <span>用户类型：{{ form.userType }}</span>
        <span v-show="discount!==1">当前折扣：{{ discount*10 }}折</span>
        <el-button v-if="form.userType==='普通用户'" type="danger" size="small" @click="openVipDialog">开通会员</el-button>
        <el-button v-if="form.userType!=='普通用户'" type="danger" size="small" @click="openVipDialog">升级会员</el-button>
      </div>
    </el-card>
    <VipDialog
      :dialog-visible="dialogFormVisible"
      @closeDialog="closeHandler"
      @init="init"
    />
  </el-container>
</template>

<script>
import { getCustomer, updateCustomerInfo } from '@/api/customer'
import { getVipList } from '@/api/vip'
import { Message } from 'element-ui'
import VipDialog from './components/vipDialog'
export default {
  name: 'MyMsg',
  components: { VipDialog },
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      modifyState: true,
      discount: this.$store.state.user.discount,
      form: {
        username: '',
        userType: '',
        name: '',
        sex: '',
        phone: '',
        address: '',
        brand: '',
        model: '',
        color: '',
        carId: ''
      },
      vipArr: []
    }
  },
  created() {
    this.getVipList()
    this.init()
  },
  methods: {
    init() {
      const query = {}
      query.username = this.$store.getters.name
      this.loading = true
      getCustomer(query).then(res => {
        if (res) {
          this.form.username = res.data.list[0].username
          this.form.name = res.data.list[0].name
          this.form.sex = res.data.list[0].sex
          this.form.phone = res.data.list[0].phone
          this.form.address = res.data.list[0].address
          const re = this.vipArr.find(item => {
            return item.vipType === res.data.list[0].userType
          })
          if (re) {
            this.form.userType = re.name
          } else {
            this.form.userType = '普通用户'
          }
          this.form.brand = res.data.list[0].carInfo.brand
          this.form.model = res.data.list[0].carInfo.model
          this.form.color = res.data.list[0].carInfo.color
          this.form.carId = res.data.list[0].carInfo.carId
        }
        this.loading = false
      })
    },
    onSubmit() {
      const query = { ...this.form }
      this.loading = true
      updateCustomerInfo(query).then(res => {
        if (res) {
          Message({
            message: res.data.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.loading = false
        }
        this.loading = false
      })
      this.init()
      this.modifyState = true
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    openVipDialog() {
      this.dialogFormVisible = true
    },
    closeHandler() {
      this.dialogFormVisible = false
    },
    getVipList() {
      getVipList().then(res => {
        if (res) {
          res.data.list.forEach(element => {
            const obj = {}
            obj.vipType = element.vipType
            obj.name = element.name
            this.vipArr.push(obj)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.myMsg-box{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 670px;
  width: 100%;
  // background: url('../../assets/bg_img/bg1.jpg') no-repeat;
  // background-size: 100% 100%;
  .box-card{
    position: relative;
    .msg-box{
      margin-bottom: 10px;
        .el-descriptions__header{
          margin-bottom: 10px;
        }
    }
    .join-vip-box{
      position: absolute;
      right: 20px;
      top: 7px;
      display: inline-block;
      > span{
        font-size: 14px;
        color: #666;
        margin-right: 20px;
      }
    }
  }
}

</style>
